<template>
	<div class="page-layout">
		<div class="page-head-bar">
			<div class="page-head-bar-return-btn" @click="page_back">
				<b-icon-chevron-compact-left />
			</div>
			<div class="page-head-bar-title">{{ page_title }}</div>
		</div>
		<div class="page-content">
			<b-card class="order-items" border-variant="light" v-for="(item, i) in orders_data" :key="i">
				<div class="order-item-order-id">{{ item.id }}</div>
				<div class="order-item-order-time">{{ item.date }}</div>
				<div class="order-goods-list">
					<div class="order-goods" v-for="(goods, goods_index) in item.goods_list" :key="goods_index">
						<div class="order-goods-image">
							<img :src="goods.image + '!50'" />
						</div>
						<div class="order-goods-content">
							<p class="order-goods-name">
								{{ goods.name }} x <big>{{ goods.number }}</big>
							</p>
							<p class="order-goods-money">
								<small>￥</small> {{ (goods.number * goods.price).toFixed(2) }}
							</p>
						</div>
					</div>
				</div>
				<div class="order-item-remark">
					备注：<span class="order-item-remark-content">{{ item.remark.length == 0 ? '无' : item.remark }}</span>
				</div>
				<div class="order-item-status" v-show="type == 'all'">
					{{ status_trasfer(item.status) }}
				</div>
				<div class="order-item-foot">
					<div class="order-item-foot-total">
						合计：<span class="order-item-foot-money"><small>￥</small> {{ item.money }}</span>
					</div>
					<div class="order-item-foot-btn" v-if="item.status == 0">
						<b-button size="sm" variant="primary" @click="payment(item.id)">去付款</b-button>
					</div>
					<div class="order-item-foot-btn" v-if="item.status == 2">
						<b-button size="sm" variant="primary" @click="confirm(item.id)">确认收货</b-button>
					</div>
				</div>
			</b-card>
		</div>
		<Payment v-bind.sync="to_payment" />
	</div>
</template>

<script>
	import {BIcon, BIconChevronCompactLeft} from 'bootstrap-vue'
	import Payment from '../Public/Payment.vue'
	
	export default {
		inject: [
			'reload_view'
		],
		data(){
			return {
				type: null,
				page_title: '我的订单',
				fetch_data: {
					data_loaded: false,
					type: null,
					page: 1,
					offset: 10
				},
				orders_data: [],
				has_next_page: true,
				loading_next_page: true,
				to_payment: {
					show: false,
					id: null,
					completed: false
				}
			}
		},
		watch: {
			'to_payment.completed'(val) {
				if(val) this.reload_view()
			}
		},
		components:{
			Payment,
			BIcon,
			BIconChevronCompactLeft
		},
		mounted() {
			this.type = this.$route.params.type
			switch(this.type) {
				case 'all':
					this.page_title = '全部订单'
					break
				case 'wait_for_paid':
					this.fetch_data.type = 0
					this.page_title = '待付款'
					break
				case 'wait_for_delivered':
					this.fetch_data.type = 1
					this.page_title = '待发货'
					break
				case 'wait_for_confirm':
					this.fetch_data.type = 2
					this.page_title = '待确认'
			}
			
			this.fetch_orders()
			this.$nextTick(() => {
				const el = document.querySelector('.page-content');
				const offsetHeight = el.offsetHeight;
				el.onscroll = () => {
					const scrollTop = el.scrollTop;
					const scrollHeight = el.scrollHeight;
					if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
						if(!this.loading_next_page && this.fetch_data.data_loaded && this.has_next_page)
							this.fetch_orders()
					}
				};
			});
		},
		methods: {
			page_back(){
				this.$router.back()
			},
			fetch_orders(){
				this.loading_next_page = true
				
				this.$axios.get('/order/list', {params: this.fetch_data}).then(resp => {
					if(resp.ret == 0){
						if(resp.data != null && resp.data.length > 0) {
							this.fetch_data.page ++
							this.orders_data = this.orders_data.concat(resp.data)
						}
						else this.has_next_page = false
					}
					
					this.loading_next_page = false
					this.fetch_data.data_loaded = true
				})
			},
			status_trasfer(status){
				let str = '未知'
				switch(status){
					case 0:
						str = '待付款'
						break
					case 1:
						str = '待发货'
						break
					case 2:
						str = '待确认'
						break
					case 3:
						str = '已确认'
						break
				}
				
				return str
			},
			payment(id){
				this.to_payment.id = id
				this.to_payment.show = true
			},
			confirm(id){
				this.$axios.get('/order/confirm', {params: {id: id}}).then(resp => {
					if(resp.ret == 0) {
						this.$msg('已确认')
						this.reload_view()
					}
				})
			}
		}
	}
</script>

<style>
	.page-layout {
		position: relative;
		padding-top: 3rem;
	}
	.page-head-bar {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 20;
		height: 3rem;
		background-color: #FFFFFF;
		border-bottom: 0.0625rem solid #EEEEEE;
	}
	.page-head-bar-return-btn {
		display: inline-block;
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		cursor: pointer;
	}
	.page-head-bar-title {
		display: inline-block;
		width: calc(100% - 3rem);
		padding-right: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		color: #666666;
	}
	.page-content {
		height: calc(100vh - 60px - 3rem);
		padding: 0.9375rem;
		overflow-y: auto;
	}
	.order-items {
		position: relative;
		/* display: flex; */
		margin-bottom: 0.9375rem;
	}
	.order-item-order-id {
		float: left;
		font-size: 0.8125rem;
		color: #666666
	}
	.order-item-order-time {
		float: right;
		font-size: 0.8125rem;
		color: #666666
	}
	.order-item-remark {
		margin-bottom: 0.625rem;
		margin-left: 0.3125rem;
		font-size: 15px;
	}
	.order-item-remark-content {
		color: #666;
	}
	.order-item-status {
		margin-left: 0.3125rem;
		font-size: 15px;
		color: #FF8C00;
	}
	.order-item-foot {
		margin-top: 0.625rem;
		display: flex;
		align-items: center;
	}
	.order-item-foot-total {
		font-size: 0.9375rem;
		color: #666666;
	}
	.order-item-foot-money {
		font-size: 1.5625rem;
		color: rgb(255, 78, 47)
	}
	.order-item-foot-btn {
		position: absolute;
		right: 1.25rem;
	}
	.order-goods-list {
		clear: both;
	}
	.order-goods {
		display: flex;
		padding: 0.9375rem;
	}
	.order-goods-image {
		width: 3.125rem;
		height: 3.125rem;
		margin-right: 0.9375rem;
	}
	.order-goods-image img {
		width: 3.125rem;
		height: 3.125rem;
	}
	.order-goods-content {
		
	}
	.order-goods-content p {
		margin-bottom: 0;
	}
	.order-goods-name {
		font-size: 0.9375rem;
	}
	.order-goods-money {
		font-size: 1.0625rem;
		color: rgb(255, 78, 47)
	}
</style>
